@charset "UTF-8";

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin abs ($way, $top: auto,$right: auto,$bottom: auto,$left: auto){
    position: #{$way};
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

@mixin zhongz($num) {
    -webkit-transform: translateY($num);
    transform: translateY($num);
}
@mixin hengz($num) {
    -webkit-transform: translateX($num);
    transform: translateX($num);
}
@mixin wy($x,$y){
    -webkit-transform: translate($x,$y);
    transform: translate($x,$y);
}
@mixin suof($num){
    -webkit-transform: scale($num);
    transform: scale($num);
}
@mixin delay($num) {
    -webkit-transition-delay: ($num);
    transition-delay: ($num);
}
@mixin ani($num){
    -webkit-transition: all $num ease;
    transition: all $num ease;
}


%center{
    text-align: center;
}

%ani1{
    transition: all 100ms ease;
}
%ani3{
    transition: all 500ms ease;
}
%none{
    display: none;
}

%wh100{
    width: 100%;
    height: 100%;
}


@mixin bgPosition($spriteW, $spriteH, $iconW, $iconH, $positionX, $positionY) {
    @if($spriteW == $iconW) {
        background-position: (0 ($positionY / ($spriteH - $iconH)) * 100%); 
    }
    @else if($spriteH == $iconH) {
        background-position: (($positionX / ($spriteW - $iconW)) * 100% 0);
    }
    @else {
        background-position: (($positionX / ($spriteW - $iconW)) * 100% ($positionY / ($spriteH - $iconH)) * 100%); 
    }
}

@mixin bgpos($iconWidth, $iconHeight, $iconX, $iconY){

    width: ($iconWidth / 20)+rem;
    height: ($iconHeight / 20)+rem;
    background: {
        image: url(../images/a.png);
        size: (2000 / 20)+rem (3236 / 20)+rem;
    }

    $spriteWidth : 2000;
    $spriteHeight : 3236;

    @include bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY);
}